<template>
    <div class="home">
        <myheader title="首页" :back="false" :more="false" ></myheader>
        <swiper :swiperList="swiperList" :isFull="true"></swiper>
        <div class="icons">
            <router-link tag="div" to="/home/newslist" class="icons-item">
                <img src="../assets/images/1.png">
                <p>新闻资讯</p>
            </router-link>
<!--            声明式的路由导航-->
            <router-link tag="div" to="/home/photolist" class="icons-item">
                <img src="../assets/images/2.png">
                <p>图片分享</p>
            </router-link>
<!--            编程式的导航-->
            <div class="icons-item" @click="goToGoodslist">
                <img src="../assets/images/3.png">
                <p>商品购买</p>
            </div>
            <div class="icons-item">
                <img src="../assets/images/4.png">
                <p>留言反馈</p>
            </div>
            <div class="icons-item">
                <img src="../assets/images/5.png">
                <p>视频专区</p>
            </div>
            <div class="icons-item">
                <img src="../assets/images/6.png">
                <p>联系我们</p>
            </div>
        </div>

    </div>
</template>

<script>
    import myheader from '../components/Header'
    import swiper   from '../components/swiper'
    import { Toast } from 'mint-ui';
    export default {
        name: "Home",

        components:{
            myheader,swiper
        },
        data(){
            return {
                swiperList:[]
            }
        },
        methods:{
            goToGoodslist(){ //使用编程式导航进行链接跳转
              this.$router.push({path:'/home/goodslist'})
            },
            getSwipeData(){
                this.$http.get('api/getlunbo').then(response=>{//这是成功的回调函数
                    this.swiperList = response.body.message
                },err=>{//这是失败的回调
                    Toast({
                        message: '获取轮播数据失败',
                        position: 'top',
                        duration: 2000
                    });
                })
            }
        },
        created(){
            this.getSwipeData()//获取轮播数据
        }
    }
</script>

<style scoped lang="scss">
.icons{
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .icons-item{
        width: 33%;
        text-align: center;
        img{
            width: 50%;
        }
        p{
            font-size: 10px;
            color: #333333;
        }
    }
}
</style>
